<template>
  <div class="module-header">
    {{ `订单列表` }}
    <div class="module-header-search">
      客户名或订单号：
      <el-input size="default" v-model="searchWord" clearable placeholder="输入客户名或订单号，支持模糊查询"/>
      <el-button size="default" type="primary" @click="currentPage=1;getData()">搜索</el-button>
      <el-button size="default" type="primary" @click="createOrder">创建订单</el-button>
    </div>
  </div>
  <div class="table-content">
    <el-table :data="orderList" style="width: 100%" stripe empty-text="没有数据" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="orderNo" label="订单号" width="200" fixed="left"></el-table-column>
      <el-table-column prop="orderDate" label="订单日期" width="100"></el-table-column>
      <el-table-column prop="customerName" label="订单客户" width="320"></el-table-column>
      <el-table-column prop="paidCustomerName" label="结算客户" width="320"></el-table-column>
      <el-table-column prop="deliveryCustomerName" label="交付客户"></el-table-column>
      <el-table-column label="管理" fixed="right" width="260">
        <template #default="scope">
          <el-button size="small" @click="createStoreOut( [scope.row.id])">发货</el-button>
          <el-button size="small" @click="handleView(scope.$index, scope.row)">查看</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleNullify(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
                   background layout="prev, pager, next, sizes" small :total="recordCount" current-page="1"
                   :default-page-size="10" :hide-on-single-page="true"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
  <el-drawer v-model="showDrawer" direction="rtl" size="600px">
    <template #header>
      <h4>创建发货单</h4>
    </template>
    <template #default>
      <div>
        <el-radio v-model="radio1" label="Option 1" size="large">Option 1</el-radio>
        <el-radio v-model="radio1" label="Option 2" size="large">Option 2</el-radio>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelStoreOut">取消</el-button>
        <el-button type="primary" @click="confirmStoreOut">确认发货</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts">
import {mixins, Options} from 'vue-class-component';
import {CirclePlusFilled, Edit} from "@element-plus/icons-vue";
import OrderModel from "@/models/OrderModel";
import {selectOrder} from "@/apis/orders.api";
import DictMixin from "@/mixins/dict.mixin";
import PageMixin from "@/mixins/page.mixin";

@Options({
  components: {CirclePlusFilled, Edit}
})
export default class OrderListView extends mixins(DictMixin, PageMixin) {
  private dict: { [key: string]: number } = {"合成纸不干胶": 1, "普通不干胶纸": 2}

  private searchWord = '';
  private orderData: OrderModel = new OrderModel();
  private orderList: OrderModel[] = [];
  private mergeDeliver = false;
  private showDrawer = false;

  created(): void {
    this.getData()
  }

  createOrder(): void {
    this.$router.push('/order/create');
  }

  getData(): void {
    selectOrder(this.searchWord, this.currentPage, this.pageSize).then(value => {
      this.orderList = value.content
      this.recordCount = value.totalElements;
    });
  }

  confirmStoreOut() {
    console.log(1)
  }

  cancelStoreOut() {
    console.log(2)
  }

  createStoreOut(orderIds: number[]): void {
    console.log(orderIds)
  }

  handleSelectionChange(selected: OrderModel[]) {
    console.log(selected);
  }

  handleView(rowIndex: number, row: OrderModel) {
    this.orderData = row;
  }

  handleEdit(rowIndex: number, row: OrderModel): void {
    this.orderData = row;
  }

  // 订单作废，不可删除
  handleNullify(row: OrderModel): void {
    console.log(row)
  }
}

</script>
